<template>
    <div class="container">
        <div class="top">
            <div class="userInfo">
                <img src="../../../assets/images/userInfo.webp" class="usetInfoImg" />
                <div class="account">
                    <span>1883416_IDG6</span>
                    <p>您还不是会员</p>
                </div>
            </div>
            <div class="text">开通会员平均每年可省：￥9500</div>
            <div class="member">
                <div class="left">
                    <span>季度会员</span>
                    <span>￥<i class="bigSize">98</i>/季</span>
                    <span>含￥98(青少年专属)</span>
                </div>
                <div class="middle">
                    <span>一年会员</span>
                    <span>￥<i class="bigSize">268</i>/年</span>
                    <span>合计￥268</span>
                </div>
                <div class="right active">
                    <span>三年会员</span>
                    <span>￥<i class="bigSize">196</i>/年</span>
                    <span>合计￥588(省￥216)</span>
                    <p>推荐</p>
                </div>
            </div>
            <div>
                <button class="btn">立即以元开通</button>
            </div>
            <div class="agreement">
                开通即视为同意<a href="#">《会员服务协议》</a>
            </div>
        </div>
        <div class="bottom">
            <p>会员专属权益</p>
            <ul>
                <el-popover height="160px" width="250px" placement="top"
                    popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                    <template #reference>
                        <li>
                            <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                            <span>723个会员专区课程免费学习</span>
                        </li>
                    </template>
                    <template #default>
                        <div class="demo-rich-conent" style="
								display: flex;
								gap: 16px;
								flex-direction: column;
							">
                            <img class="popoImg" src="https://rs.dance365.com/teach_video_free.png" alt="" />
                            <p>
                                会员专区的723个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                            </p>
                            <button class="popobtn">立即前往会员专区</button>

                        </div>
                    </template>
                </el-popover>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
                <li>
                    <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                    <span>723个会员专区课程免费学习</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.container {
    width: 960px;
    height: 840px;
    background-color: #fff;
    padding: 30px;
}

.top {
    height: 465px;
    border-bottom: 1px solid #eee;
}

.userInfo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.usetInfoImg {
    width: 100px;
    border-radius: 50%;
}

.account {
    margin-left: 21px;
}

.account p {
    color: crimson;
}

.text {
    margin-top: 20px;
    text-align: center;
}

/* 会员 */
.member {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.member div {
    width: 218px;
    height: 125px;
    border: 1px solid #b4b8c4;
    border-radius: 5px;
    position: relative;
}

.member div span {
    display: block;
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin: 10px 0;
}

.member div span:nth-child(2) {
    height: 35px;
}

.member div p {
    width: 76px;
    height: 36px;
    padding: 3px 2px;
    text-align: center;
    line-height: 36px;
    border: 1px solid #fff;
    background-color: #ff4e86;
    border-radius: 20px;
    position: absolute;
    top: -30px;
    right: -20px;
    color: #fff !important;
}

.active {
    border: 1px solid #f93684 !important;
    background-color: #f9ebf1 !important;
    color: #f93684;
}

.middle {
    margin: 0 30px;
}

.bigSize {
    font-size: 30px;
}

.btn {
    width: 330px;
    height: 56px;
    border: 1px solid #e6c4d5;
    background-color: #ff4e86;
    border-radius: 4px;
    margin: 0 315px;
    margin-top: 30px;
    margin-bottom: 12px;
}

/* 协议 */
.agreement {
    text-align: center;
}

.agreement a {
    text-decoration: none;
    color: #fa3684;
    margin-left: 10px;
}

.bottom {
    border-bottom: 1px solid #b4b8c4;
}

.bottom p {
    height: 32px;
    margin-top: 32px;
    font-size: 20px;
}

.bottom ul {
    display: flex;
    flex-wrap: wrap;
}

.bottom ul li {
    width: 127px;
    height: 127px;
    border: 1px solid #eee;
    list-style: none;
    border-radius: 4px;
    margin-left: 30px;
    margin-bottom: 30px;
}

.bottom ul li img {
    width: 46px;
    height: 42px;
    display: block;
    margin: 0 auto;
    margin-top: 14px;
}

.bottom ul li span {
    display: block;
    height: 40px;
    text-align: center;
    line-height: 20px;
    margin: 14px 10px;
    font-size: 14px;
}

.popoImg {
    width: 46px;
    height: 42px;
    display: block;
    margin: 0 auto;
}

.popobtn {
    width: 150px;
    height: 40px;
    margin: 0 auto;
}
</style>